<template>
  <div class="app-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button icon="Back" @click="goBack">返回</el-button>
        <span class="page-title">编辑</span>
      </div>
      <div class="header-right">
        <span class="user-info">信息发布</span>
      </div>
    </div>

    <!-- 编辑表单 -->
    <div class="edit-content" v-loading="loading">
      <el-card class="edit-card">
        <el-form ref="editFormRef" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" placeholder="请输入标题" />
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <editor v-model="form.content" :min-height="300" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="图片">
            <div class="image-upload-container">
              <div v-if="form.img" class="image-preview">
                <el-image 
                  :src="form.img" 
                  fit="cover"
                  style="width: 200px; height: 150px;"
                  :preview-src-list="[form.img]"
                />
                <el-button type="danger" size="small" @click="removeImage" style="margin-top: 10px;">
                  删除图片
                </el-button>
              </div>
              <div v-else class="upload-placeholder">
                <el-upload
                  class="upload-demo"
                  action="#"
                  :auto-upload="false"
                  :show-file-list="false"
                  :on-change="handleImageChange"
                >
                  <div class="upload-box">
                    <el-icon class="upload-icon"><Plus /></el-icon>
                    <div class="upload-text">上传照片</div>
                  </div>
                </el-upload>
              </div>
            </div>
          </el-form-item>
        </el-form>
        
        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button type="info" icon="Close" @click="goBack">取消</el-button>
          <el-button type="primary" icon="Check" @click="handleSave">保存</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup name="PurchaseEdit">
import { getPurchase, updatePurchase } from "@/api/system/purchase"
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()

const loading = ref(false)
const form = ref({
  id: null,
  title: '',
  content: '',
  img: '',
  publisher: '',
  time: '',
  telephone: '',
  status: 0
})

const rules = {
  title: [
    { required: true, message: '请输入标题', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入内容', trigger: 'blur' }
  ]
}

/** 获取编辑数据 */
function getEditData() {
  const id = route.params.id
  if (id) {
    loading.value = true
    getPurchase(id).then(response => {
      form.value = response.data
      loading.value = false
    }).catch(() => {
      loading.value = false
      proxy.$modal.msgError("获取数据失败")
    })
  }
}

/** 处理图片上传 */
function handleImageChange(file) {
  // 这里应该调用文件上传API，暂时使用本地预览
  const reader = new FileReader()
  reader.onload = (e) => {
    form.value.img = e.target.result
  }
  reader.readAsDataURL(file.raw)
}

/** 删除图片 */
function removeImage() {
  form.value.img = ''
}

/** 保存编辑 */
function handleSave() {
  proxy.$refs["editFormRef"].validate(valid => {
    if (valid) {
      loading.value = true
      updatePurchase(form.value).then(response => {
        proxy.$modal.msgSuccess("修改成功")
        goBack()
      }).catch(() => {
        loading.value = false
        proxy.$modal.msgError("修改失败")
      })
    }
  })
}

/** 返回上一页 */
function goBack() {
  router.go(-1)
}

// 页面加载时获取数据
onMounted(() => {
  getEditData()
})
</script>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-info {
  color: #606266;
  font-size: 14px;
}

.edit-content {
  padding: 0 20px;
}

.edit-card {
  margin-bottom: 20px;
}

.image-upload-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.image-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-placeholder {
  display: flex;
  align-items: center;
}

.upload-box {
  width: 200px;
  height: 150px;
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.3s;
}

.upload-box:hover {
  border-color: #409eff;
}

.upload-icon {
  font-size: 28px;
  color: #8c939d;
  margin-bottom: 8px;
}

.upload-text {
  color: #8c939d;
  font-size: 14px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}
</style> 